<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>伪类伪元素选择器</title>
        <style>

            /*
            未被点击状态

            给定义了href（超链接）属性的元素添加样式
            */
            a:link{
                color: red;
            }

            /*
            超链接被访问过的状态
            */
            a:visited{
                color:black;
            }

            /*鼠标悬浮在元素上方时的效果*/
            a:hover{
                background-color: black;
                color: white;
            }

            /*鼠标按下时的状态*/
            a:at-level{
                color: yellow;
            }

            /*顺序不能错*/

            /*伪元素选择器*/
            /*在元素的内容的前方插入内容*/
            p::before{
                content: "Happy new year";
                color:red;
                font-size: 30px;
            }

            /*在元素的内容的后方插入内容*/
            p::after{
                content: "end!";
                color: blue;
                font-size: 30px;
            }

            /*选中内容的首字母*/
            p::first-letter{
                font-size: 50px;
                color: pink;
            }

            /*选中内容的第一行*/
            p::first-line{
                background-color: black;
            }
        </style>
    </head>
    <body>

        <a href="http://taobao.com">淘宝网</a>
        <p>
            听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。听说这周有雪，而且是大雪，而且是鹅毛般的大雪。
        </p>
    </body>
</html>